<template>
  <view class="container">
    <view class="header">
      <view class="header-title"> AI辅助创作 </view>
      <view class="oneWorld"> 灵感来源、文思涌现 </view>
    </view>

    <view class="write" @click="chooseNext"> AI写作 </view>
    <view class="ask" @click="tochat"> 问答式创作 </view>

    <view class="grid">
      <div class="gridTop">
        <view class="gridItem" @click="onClickLogo4">
          <image src="../../static/lovebook.svg" alt=""></image>
          <text>告白情书</text>
        </view>
        <view class="gridItem" @click="onClickLogo5">
          <image src="../../static/friend.svg" alt=""></image>
          <text>发朋友圈</text>
        </view>
        <view class="gridItem" @click="onClickLogo6">
          <image src="../../static/text.svg" alt=""></image>
          <text>作文</text>
        </view>
        <view class="gridItem" @click="onClickLogo7">
          <image src="../../static/role.svg" alt=""></image>
          <text>角色问答</text>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    tochat() {
      uni.navigateTo({
        url: "../ai/aiList/aiList",
      });
    },
    chooseNext() {
      uni.navigateTo({
        url: "../Writing/Writing",
      });
    },
    onClickLogo4() {
      uni.navigateTo({
        url: "../loveStory/loveStory",
      });
    },
    onClickLogo5() {
      uni.navigateTo({
        url: "../Moments/Moments",
      });
    },
    onClickLogo6() {
      uni.navigateTo({
        url: "../Composition/Composition",
      });
    },
    onClickLogo7() {
      uni.navigateTo({
        url: "../roleChat/roleChat",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 30rpx;
  padding-bottom: 120rpx;
}
/* 头部 */

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 145rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
  padding-bottom: 15rpx;
}

.header .header-title {
  color: rgba(0, 0, 0, 1);
  font-size: 40rpx;
  font-weight: 700;
}

.header .oneWorld {
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 7rpx;
}

.write {
  width: 90vw;
  height: 70px;
  line-height: 70px;
  font-weight: 800;
  font-size: 35rpx;
  background: linear-gradient(
    130.4deg,
    rgba(68, 212, 183, 1) 0%,
    rgba(48, 184, 156, 1) 100%
  );
  border-radius: 20px;
  text-align: center;
  margin: 5% auto 10%;
  margin-top: 20%;
  color: aliceblue;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.ask {
  width: 90vw;
  height: 70px;
  line-height: 70px;
  font-weight: 800;
  font-size: 35rpx;
  background: linear-gradient(
    130.4deg,
    rgba(84, 172, 212, 1) 0%,
    rgba(61, 137, 184, 1) 100%
  );
  border-radius: 20px;
  text-align: center;
  margin: 0 auto;
  color: aliceblue;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.grid {
  width: 95vw;
  margin-left: 3vw;
  margin-right: 5vw;
  margin-top: 10vh;
  transform: translate(0, -25%);
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 10px;
  animation: appear 2s ease 0s 1 normal forwards;

  .gridTop {
    display: flex;
    justify-content: space-around;
  }

  .gridBottom {
    display: flex;
    justify-content: space-around;
    margin-top: 50rpx;
  }

  .gridItem {
    text-align: center;
    width: 15vw;
    height: 15vw;
    margin: 20rpx;

    image {
      width: 15vw;
      height: 10vw;
    }

    text {
      font-size: 14px;
      font-family: "微软雅黑", monospace;
      font-weight: 500;
    }
  }
}
</style>
